<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../resources/picker-common.js"></script>
</head>
<body>
<style>
select {
    position: absolute;
    -webkit-appearance: none;
}
</style>
<select id="menu" style="width: 200px; height: 10px;">
</select>
<p id="description" style="opacity: 0"></p>
<div id="console" style="opacity: 0"></div>
<script>
var menu = document.getElementById('menu');
var screenWidth = 500;
var screenHeight = 500;
var menuWidth = 200;
var menuHeight = 10;
test1();

function openPickerErrorCallback() {
    testFailed('picker didn\'t open')
    finishJSTest();
}

function test1() {
    // Position menu at top left.
    menu.style.top = 0;
    menu.style.left = 0;
    setItemCount(1);
    openPicker(menu, function () {
        injectFakeScreenSize()
        injectFakeItemSize(20, 100, test2);
    }, openPickerErrorCallback);
}

function test2() {
    popupWindowRect = getPopupWindowRect();
    shouldBe('popupWindowRect.x', '0');
    shouldBe('popupWindowRect.y', 'menuHeight');

    popupWindow.pagePopupController.closePopup();
    // Position menu at bottom right.
    menu.style.top = (screenHeight - menuHeight) + 'px';
    menu.style.left = (screenWidth - menuWidth) + 'px';
    setItemCount(1);
    openPicker(menu, function () {
        injectFakeScreenSize();
        injectFakeItemSize(20, 100, test3);
    }, openPickerErrorCallback);
}

function test3() {
    popupWindowRect = getPopupWindowRect();
    shouldBe('popupWindowRect.x', 'screenWidth - popupWindowRect.width');
    shouldBe('popupWindowRect.y', 'screenHeight - popupWindowRect.height - menuHeight');

    popupWindow.pagePopupController.closePopup();
    // Position menu at right edge, clipped.
    menu.style.top = '0';
    menu.style.left = (screenWidth - 100) + 'px';
    setItemCount(1);
    openPicker(menu, function () {
        injectFakeScreenSize();
        injectFakeItemSize(200, 100, test4);
    }, openPickerErrorCallback);
}

function test4() {
    popupWindowRect = getPopupWindowRect();
    shouldBe('popupWindowRect.x', 'screenWidth - 100');
    shouldBe('popupWindowRect.y', 'menuHeight');

    popupWindow.pagePopupController.closePopup();
    // Position menu at left edge, clipped.
    menu.style.top = '0';
    menu.style.left = '-100px';
    setItemCount(1);
    openPicker(menu, function () {
        injectFakeScreenSize();
        injectFakeItemSize(200, 100, test5);
    }, openPickerErrorCallback);
}

function test5() {
    popupWindowRect = getPopupWindowRect();
    shouldBe('popupWindowRect.x', '0');
    shouldBe('popupWindowRect.y', 'menuHeight');

    popupWindow.pagePopupController.closePopup();
    // Position close to right edge.
    menu.style.top = '0';
    menu.style.left = (screenWidth - menuWidth - 10) + 'px';
    setItemCount(1);
    openPicker(menu, function () {
        injectFakeScreenSize();
        injectFakeItemSize(250, 100, test6);
    }, openPickerErrorCallback);
}

function test6() {
    popupWindowRect = getPopupWindowRect();
    shouldBe('popupWindowRect.x', 'screenWidth - 250 - 10');
    shouldBe('popupWindowRect.y', 'menuHeight');

    popupWindow.pagePopupController.closePopup();
    // Position close to bottom edge.
    menu.style.top = (screenHeight - 100) + 'px';
    menu.style.left = '0';
    setItemCount(2);
    openPicker(menu, function () {
        injectFakeScreenSize();
        injectFakeItemSize(200, 100, test7);
    }, openPickerErrorCallback);
}

function test7() {
    popupWindowRect = getPopupWindowRect();
    // Popup should appear right at the right edge of the screen.
    shouldBe('popupWindowRect.x', '0');
    shouldBe('popupWindowRect.y', 'screenHeight - 100 - popupWindowRect.height');


    popupWindow.pagePopupController.closePopup();
    // Apply transform.
    menu.style.transform = 'scale(1.2)';
    menu.style.top = '100px';
    menu.style.left = '100px';
    setItemCount(1);
    openPicker(menu, function () {
        injectFakeScreenSize();
        injectFakeItemSize(200, 100, test8);
    }, openPickerErrorCallback);
}

function test8() {
    popupWindowRect = getPopupWindowRect();
    shouldBe('popupWindowRect.x', '100 - menuWidth * 0.1');
    shouldBe('popupWindowRect.y', '100 + menuHeight * 1.1');

    finishJSTest();
}

function getPopupWindowRect() {
    return new popupWindow.Rectangle(popupWindow.screenX - window.screen.availLeft, popupWindow.screenY - window.screen.availTop, popupWindow.innerWidth, popupWindow.innerHeight);
}

function setItemCount(count) {
    menu.innerHTML = '';
    for (var i = 0; i < count; i++) {
        var option = document.createElement('option');
        menu.appendChild(option);
    }
}

function injectFakeScreenSize() {
    Object.defineProperty(popupWindow, 'screen', {
        value: {
            width: screenWidth,
            height: screenHeight,
            availLeft: window.screen.availLeft,
            availTop: window.screen.availTop,
            availWidth: screenWidth,
            availHeight: screenHeight
        }
    });
}

function injectFakeItemSize(width, height, callback) {
    var style = popupWindow.document.createElement('style');
    style.innerHTML = 'select { width: ' + width + 'px !important; } option { height: ' + height + 'px; }';
    popupWindow.document.body.appendChild(style);
    popupWindow.global.picker._fixWindowSize();
    popupWindow.addEventListener('resize', callback, false);
}
</script>
</body>
</html>
